﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/vue.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/element-index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/element-index.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/axios.js"))
}
<div class="container-div" id="orderDetails-vue" style="margin-bottom:100px">
    <div class="header-info">
        <el-row :gutter="20">
            <el-col :span="6">
                <span>订单编号：</span>
                <span>{{OrderInfo.OrderCode}}</span>
            </el-col>
            <el-col :span="6">
                <span>物料名称：</span>
                <span>{{OrderInfo.MaterialName}}</span>
            </el-col>
            <el-col :span="6">
                <span>订单状态：</span>
                <span>{{OrderInfo.OrderCurrentStatus}}</span>
            </el-col>
            <el-col :span="6">
                <span>优先级：</span>
                <span>{{OrderInfo.Priority}}</span>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <span>发送时间：</span>
                <span>{{OrderInfo.SendTime}}</span>
            </el-col>
            <el-col :span="6">
                <span>计划投产数量：</span>
                <span>{{OrderInfo.MaterialQuantity}}</span>
            </el-col>
            <el-col :span="6">
                <span>计划生产数量：</span>
                <span>{{OrderInfo.PlaneQuantity}}</span>
            </el-col>
            <el-col :span="6">
                <span>计划批次数量：</span>
                <span>{{OrderInfo.BatchQuantity}}</span>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <span>实际投产数量：</span>
                <span>{{OrderInfo.OnlineQuantity}}</span>
            </el-col>
            <el-col :span="6">
                <span>完成数量：</span>
                <span>{{OrderInfo.FinishedQuantity}}</span>
            </el-col>
            <el-col :span="6">
                <span>次品数量：</span>
                <span>{{OrderInfo.DefectQuantity}}</span>
            </el-col>
            <el-col :span="6">
                <span>最后更新时间：</span>
                <span>{{OrderInfo.UpdateTime}}</span>
            </el-col>
        </el-row>
    </div>
    <div class="table-p">
        <el-table :data="tableData"
                  style="width: 100%"
                  border>
            <el-table-column type="index"
                             label="序号">
            </el-table-column>
            <el-table-column prop="ProductionId"
                             label="工件编号">
            </el-table-column>
            <el-table-column prop="CreateTime"
                             label="创建日期">
            </el-table-column>
            <el-table-column prop="CompleteTime"
                             label="完成日期">
            </el-table-column>
            <el-table-column prop="result"
                             label="加工结果">
            </el-table-column>
            <el-table-column label="详情" fixed="right">
                <template slot-scope="scope">
                    <a v-on:click="showProductionUrl(scope.row)">查看</a>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
<script>
    let app = new Vue({
        el: '#orderDetails-vue',
        data:{
            OrderCode: '',
            OrderInfo: {
                OrderCode: '',
                MaterialName: '',
                OrderCurrentStatus: '',
                Priority: '',
                SendTime: '',
                MaterialQuantity: '',
                PlaneQuantity: '',
                BatchQuantity:'',
                OnlineQuantity: '',
                FinishedQuantity: '',
                DefectQuantity: '',
                UpdateTime:''
            },
            tableData: [],
            iframeTag: 200,
            productionCode:''
        },
        methods:{
            // 页面初始化，根据orderCode获取订单工件详情
            InitData(){
                let url = '@Url.Content("~/OrderManage/OrderPreview/GetOrderProductionDetails")'
                axios.get(url, {
                    params: {
                        orderCode: this.OrderCode
                    }
                }).then(res => {
                    console.log(res)
                    let data = res.data;
                    this.OrderInfo = {
                        OrderCode: data.orderInfo[0].OrderCode,
                        MaterialName: data.orderInfo[0].MaterialName,
                        OrderCurrentStatus: data.orderInfo[0].OrderCurrentStatus,
                        Priority: data.orderInfo[0].Priority,
                        SendTime: data.orderInfo[0].SendTime,
                        MaterialQuantity: data.orderInfo[0].MaterialQuantity,
                        PlaneQuantity: data.orderInfo[0].PlaneQuantity,
                        BatchQuantity: data.orderInfo[0].BatchQuantity,
                        OnlineQuantity: data.orderProgress[0].OnlineQuantity,
                        FinishedQuantity: data.orderProgress[0].FinishedQuantity,
                        DefectQuantity: data.orderProgress[0].DefectQuantity,
                        UpdateTime: data.orderProgress[0].UpdateTime
                    };
                    this.tableData = [];
                    for (let productionLife of data.productionLife) {
                        let table_index = 0;
                        // 添加记录
                        if (this.tableData.length == 0) {
                            this.tableData.push({
                                ProductionId: productionLife.ProductionId,
                                CreateTime: '',
                                CompleteTime: '',
                                result: ''
                            })
                        } else {
                            for (let i = 0; i < this.tableData.length; i++) {
                                if (i + 1 == this.tableData.length) {
                                    if (this.tableData[i].ProductionId == productionLife.ProductionId) {
                                        table_index = i;
                                        break;
                                    } else {
                                        this.tableData.push({
                                            ProductionId: productionLife.ProductionId,
                                            CreateTime: '',
                                            CompleteTime: '',
                                            result: ''
                                        })
                                        table_index = i + 1;
                                    }
                                } else {
                                    if (this.tableData[i].ProductionId == productionLife.ProductionId) {
                                        table_index = i;
                                        break;
                                    }
                                }
                            }
                        }
                        // 分析数据
                        switch (productionLife.ProductionResult) {
                            case 0: {
                                this.tableData[table_index].CreateTime = productionLife.UpdateTime
                                if (this.tableData[table_index].ProductionResult == '') {
                                    this.tableData[table_index].result='未开始'
                                }
                                break;
                            }
                            case 1: {
                                if (this.tableData[table_index].ProductionResult == '') {
                                    this.tableData[table_index].result = '加工中',
                                        this.tableData[table_index].CompleteTime = productionLife.UpdateTime
                                }
                                break;
                            }
                            case 2: {
                                this.tableData[table_index].result = '加工完成',
                                    this.tableData[table_index].CompleteTime = productionLife.UpdateTime
                                break;
                            }
                            case 3: {
                                this.tableData[table_index].result = '返修中',
                                    this.tableData[table_index].CompleteTime = productionLife.UpdateTime
                                break;
                            }
                            case 4: {
                                this.tableData[table_index].result = '加工失败',
                                    this.tableData[table_index].CompleteTime = productionLife.UpdateTime
                                break;
                            }
                        }
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 查看某一工件路由历史
            showProductionUrl(row) {
                if (window.parent.document.getElementById("productionURLDetails-close") != null) {
                    window.parent.document.getElementById("productionURLDetails-close").click()
                }
                this.productionCode = row.ProductionId
                let url = '@Url.Content("~/OrderManage/OrderPreview/ProductionDetails")'
                this.AddIframePage(url,'工件详情')
            },
            // 封装JS添加框架页面方法
            AddIframePage(url, navName) {
                // 获取iframe的父类
                let iframeParent = window.parent.document.getElementById("content-main")
                // 获取导航a标签的父类
                let nav_a_parent = window.parent.document.querySelector('.page-tabs-content');

                // 设置其它nav_a class
                let nav_a_parent_childrens = nav_a_parent.childNodes;
                let _productionCode = this.productionCode + "-连接-" + this.OrderCode
                for (let i = 0; i < nav_a_parent_childrens.length; i++) {
                    if (nav_a_parent_childrens[i].className == 'menuTab active' || nav_a_parent_childrens[i].className == 'active menuTab') {
                        nav_a_parent_childrens[i].setAttribute('id', 'productionURL')
                        nav_a_parent_childrens[i].setAttribute('productionCode', _productionCode)
                    }
                }
                let new_nav_a = `<a href="javascript:;" id="productionURLDetails" class="menuTab"
                                data-id="${url}">${navName}
                                <i class="fa fa-times-circle" id="productionURLDetails-close"></i></a>`
                nav_a_parent.innerHTML += new_nav_a

                this.iframeTag++;
                let new_iframe = `<iframe class="SHRIS_iframe" name="iframe${this.iframeTag}"
                                    width="100%" height="100%" src="${url}"
                                    frameborder="0" data-id="${url}" seamless=""
                                    style="dispaly:none;"></iframe>`
                iframeParent.innerHTML += new_iframe
            }
        },
        mounted() {
            if (window.parent.document.getElementById("productionURLDetails") != null) {
                window.parent.document.getElementById("productionURLDetails").click()
            }
            let nav_a_info = window.parent.document.getElementById("orderSelect")
            let orderCode = nav_a_info.getAttribute("orderCode")
            this.OrderCode = orderCode
            this.InitData();
        }
    })
</script>

